<!doctype html>
<html>
<head>
	<title>Line Chart: Several Graphs in One Chart</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">
	<script src="../../common/chartdata.js"></script>
<body>
    <div id="chartDiv" style="width:600px;height:250px;margin:20px"></div>
	<script>
        webix.ui({
            view:"chart",
            container:"chartDiv",
            type:"line",

            xAxis:{
                template:"'#year#"
            },
            yAxis:{
                start:0,
                step:10,
                end: 100
            },
            legend:{
                values:[{text:"Company A",color:"#1293f8"},{text:"Company B",color:"#66cc00"}],
                align:"right",
                valign:"middle",
                layout:"y",
                width: 100,
                margin: 8
            },
            series:[
                {
                    value:"#sales#",
                    item:{
                        borderColor: "#1293f8",
                        color: "#ffffff"
                    },
                    line:{
                        color:"#1293f8",
                        width:3
                    },
                    tooltip:{
                        template:"#sales#"
                    }
                },
                {
                    value:"#sales2#",
                    item:{
                        borderColor: "#66cc00",
                        color: "#ffffff"
                    },
                    line:{
                        color:"#66cc00",
                        width:3
                    },
                    tooltip:{
                        template:"#sales2#"
                    }
                }
            ],
            data:  multiple_dataset
        });
	</script>
</body>
</html>

